<template>
    <div class="card-box">
        <el-row class="el-row1">
            <el-col :span="3">划拨批次：</el-col>
            <el-col :span="5">00000647</el-col>
            <el-col :span="3">运营商：</el-col>
            <el-col :span="5">上海电信</el-col>
            <el-col :span="3">服务周期：</el-col>
            <el-col :span="5">222222</el-col>
        </el-row>
        <el-row class="el-row1">
            <el-col :span="3">划拨人：</el-col>
            <el-col :span="5">iotboss</el-col>
            <el-col :span="3">划拨总数：</el-col>
            <el-col :span="5">1</el-col>
            <el-col :span="3">用户业务模式：</el-col>
            <el-col :span="5">月流量叠加(平台-平台)</el-col>
        </el-row>
        <el-row class="el-row1">
            <el-col :span="3">划拨对象：</el-col>
            <el-col :span="5">跨月套餐分润</el-col>
            <el-col :span="3">划拨成功：</el-col>
            <el-col :span="5">1</el-col>
            <el-col :span="3">开卡套餐：</el-col>
            <el-col :span="5">222222</el-col>
        </el-row>
        <el-row class="el-row1">
            <el-col :span="3">划拨时间：</el-col>
            <el-col :span="5">2018-07-12 17:58:52</el-col>
            <el-col :span="3">划拨失败：</el-col>
            <el-col :span="5">0</el-col>
            <el-col :span="3">是否允许测试：</el-col>
            <el-col :span="5">是</el-col>
        </el-row>
        <el-row class="el-row1">
            <el-col :span="3">沉默期(月)：</el-col>
            <el-col :span="5">2</el-col>
            <el-col :span="3">重跑次数：</el-col>
            <el-col :span="5">1</el-col>
            <el-col :span="3">测试流量：</el-col>
            <el-col :span="5">0.0 KB</el-col>
        </el-row>
        <el-row class="el-row1">
            <el-col :span="3">是否可续订套餐：</el-col>
            <el-col :span="5">是</el-col>
            <el-col :span="3">测试后卡状态：</el-col>
            <el-col :span="5">10</el-col>
            <el-col :span="3">测试期：</el-col>
            <el-col :span="5">10</el-col>
        </el-row>
        <el-row class="el-row1">
            <el-col :span="3">是否断网：</el-col>
            <el-col :span="5">否</el-col>
        </el-row>
        <el-row class="mb20">
            <el-col :md="20">
                <el-button type="primary">重新划拨</el-button>
                <el-button type="primary" @click="dialogVisible = true">划拨详情查询</el-button>
                <el-button type="primary">导出</el-button>
                <el-button type="primary" @click="getCarrierData">
                    <i class="el-icon-refresh"></i>
                </el-button>
            </el-col>
            <el-dialog title="划拨详情查询" :visible.sync="dialogVisible" width="40%">
                <el-form :model="ruleForm" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                    <el-form-item label="划拨查询：">
                        <el-radio-group v-model="ruleForm.resource">
                            <el-radio :label="1">成功</el-radio>
                            <el-radio :label="2">失败</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="划拨失败原因：">
                       <el-input v-model="ruleForm.input" placeholder="请输入内容" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="selectCarrier">查询</el-button>
                    </span>
            </el-dialog>
        </el-row>
        <el-table :data="tableData" stripe border style="width: 100%">
            <el-table-column type="selection" label="id" width="40" prop="id">
            </el-table-column>
            <el-table-column prop="iccid" label="ICCID" width="250">
            </el-table-column>
            <el-table-column prop="status" label="卡状态" width="220">
            </el-table-column>
            <el-table-column prop="success" label="划拨成功" width="220">
            </el-table-column>
            <el-table-column prop="error" label="划拨失败原因">
            </el-table-column>
            <el-table-column prop="run" label="重跑次数" width="150">
            </el-table-column>
      </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    resource: 1,
                    input: ''
                },
                dialogVisible: false,
                tableData: [
                    {
                        iccid: '8986031743206453190',
                        status: '待激活',
                        success: '划拨成功',
                        error: '不知道',
                        run: 3
                    }
                ]
            }
        }
    }
</script>

<style scoped lang="scss">
    .card-box {
        .el-row1 {
            .el-col {
                font-size: 14px;
                padding: 15px 0px;
            }
            .el-col:nth-of-type(2n + 1) {
                font-weight: bold;
                text-align: right;
            }
            .el-col:nth-of-type(2n) {
                padding-left: 15px;
            }
        }
    }
</style>